<template>
	<view class="favorite">
		<view class="cate-lv2" v-for="(item2, i2) in favList" :key="i2">
			<view class="cont" @click="gotoDetail(item2)">
				<view class="img">
					<image :src="item2.imageURL" class="left"></image>
				</view>
				<view class="right">
					<view class="right1">
						<text>{{item2.description}}</text>
					</view>

					<view class="right2">
						<text>￥{{item2.price}}</text>
					</view>
				</view>
			</view>
			<view class="favi" @click="toggleFavorite(item2)">
				<uni-icons :type="item2.isFavorite ? 'heart-filled' : 'heart'" size="18"
					:color="item2.isFavorite ? 'red' : 'gray'"></uni-icons>
				<text>{{item2.isFavorite ? '已收藏' : '收藏'}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		computed: {
			...mapState('m_user', ['userId']),
		},
		data() {
			return {
				favList: [],
				// isFavorite: true // 添加收藏状态变量
			};
		},
		onLoad() {
			this.favoriteList()
		},
		onPullDownRefresh() {
					// 显示下拉刷新时的加载动画
					this.favoriteList().finally(() => {
						// 停止下拉刷新动画
						uni.stopPullDownRefresh();
					});
				},
		methods: {
			async favoriteList() {
				if (!this.userId) {
				  uni.showToast({ title: '请先登录！', icon: 'none' });
				  return;
				};
				try {
					const res = await uni.$http.get(`/wx/favoriteList/${this.userId}`)
					console.log(res.data.data);
					// this.favList = res.data.data;
					  this.favList = res.data.data.map(item => ({
					          ...item,
					          isFavorite: true // 或者根据实际情况设置为 true
					        }));
				} catch (e) {
					console.log(e);
				}
			},
			// 点击跳转到商品详情页面
			gotoDetail(item2) {
				console.log(item2.productId)
				uni.navigateTo({
					url: '/subpkg/product-info/product-info?productId=' + item2.productId
				})
			},
			async toggleFavorite(item2) {
				try {
					// 更新后端收藏状态
					const res = await uni.$http.post(`/wx/favorite/${this.userId}/${item2.productId}`, {
						isFavorite: !item2.isFavorite // 使用项当前的 isFavorite 状态的反值
					});

					// 假设后端返回了更新后的项信息，或者你可以根据返回的结果更新本地状态
					// 这里我们直接修改本地状态作为示例
					item2.isFavorite = !item2.isFavorite; // 更新本地项的收藏状态

					uni.showToast({
						title: item2.isFavorite ? '收藏成功' : '取消收藏成功',
						icon: 'success'
					});
				} catch (error) {
					console.error(error);
					// 如果操作失败，回滚本地状态（如果需要的话）
					// 这里我们不再回滚，因为后端状态没有改变，且用户应该看到操作失败的结果
					uni.showToast({
						title: '操作失败，请先登录或检查网络',
						icon: 'none'
					});
				}
			},
		},
	}
</script>

<style lang="scss">
	.cate-lv2 {
		background: #ffffff;
		display: flex;

		border-bottom: 1px solid #ccc;

		.cont {
			height: 100px;
			display: flex;
			align-items: center;
			padding-left: 10px;

			// padding-top: 10px;
			.img {
				width: 80px;

				.left {
					width: 80px;
					height: 80px;
				}
			}

			.right {
				width: 150px;
				margin-left: 10px;

				.right1 {
					font-size: 12px;
					margin-top: -10px;
				}

				.right2 {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					color: #D81E06;
					font-size: 15px;
					margin: 12px 0 5px 0;

				}

			}
		}

		// 收藏区域
		.favi {
			width: 50px;
			// font-size: 12px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-left: 1px solid #efefef;
			color: gray;
		}

	}
</style>